<template>
  <div class="common-layout">
    <el-container>
      <!-- 顶部 Header -->
      <el-header class="header">
        👏 早上好！ {{user.username}}
        <el-card>
          <el-row>
            <el-col :span="6">
              <!-- 折线图 -->
              <div id="one" style="width: 100%; height: 200px;"></div>
            </el-col>
            <el-col :span="6">
              <div id="two" style="width: 100%; height: 200px;"></div>
            </el-col>
            <el-col :span="6">
              <div id="three" style="width: 100%; height: 200px;"></div>
            </el-col>
            <el-col :span="6">
              <div id="four" style="width: 100%; height: 200px;"></div>
            </el-col>
          </el-row>
        </el-card>
      </el-header>

      <!-- 主体 Main -->
      <el-main class="main">
        <el-card>
          <el-row>
            <el-col :span="8" style="height: 300px;"> <!-- 设置父容器的高度 -->
              <p>快捷入口</p>
              <div class="demo-type-container">
                <!-- 第一个 demo-type -->
                <div class="demo-type">
                  <div class="avatar-wrapper" @click="goToElderly('/patientInfo')">
                    <el-avatar style="background-color: #d8f6ed">
                      <el-icon color="#77e1c1" size="40px"><User /></el-icon></el-avatar>
                    <div class="avatar-text">病人信息</div> <!-- 文字 -->
                  </div>
                  <div class="avatar-wrapper" @click="goToElderly('/record')">
                    <el-avatar style="background-color: #fff8e4">
                      <el-icon color="#fddb78" size="40px"><EditPen /></el-icon></el-avatar>
                    <div class="avatar-text">在线问诊</div> <!-- 文字 -->
                  </div>
                  <div class="avatar-wrapper" @click="goToElderly('/bed')">
                    <el-avatar style="background-color: #fee3e1">
                      <el-icon color="#fa746b" size="40px"><School /></el-icon></el-avatar>
                    <div class="avatar-text">床位管理</div> <!-- 文字 -->
                  </div>
                  <div class="avatar-wrapper" @click="goToElderly('/users')">
                    <el-avatar style="background-color: #e2e4fd">
                      <el-icon color="#6c76f4" size="40px"><Avatar /></el-icon></el-avatar>
                    <div class="avatar-text">用户列表</div> <!-- 文字 -->
                  </div>
                </div>
                <!-- 第二个 demo-type -->
                <div class="demo-type">
                  <div class="avatar-wrapper" @click="goToElderly('/drugs')">
                    <el-avatar style="background-color: #d4e6fe">
                      <el-icon color="#2984f8" size="40px"><ForkSpoon /></el-icon></el-avatar>
                    <div class="avatar-text">药品信息</div> <!-- 文字 -->
                  </div>
                  <div class="avatar-wrapper" @click="goToElderly('/order')">
                    <el-avatar style="background-color: #8cdee1">
                      <el-icon color="#cbf980" size="40px"><List /></el-icon></el-avatar>
                    <div class="avatar-text">余额查询</div> <!-- 文字 -->
                  </div>
                  <div class="avatar-wrapper" @click="goToElderly('/completedOrder')">
                    <el-avatar style="background-color: #49b1fe">
                      <el-icon color="#83eafe" size="40px"><List /></el-icon></el-avatar>
                    <div class="avatar-text">账单明细</div> <!-- 文字 -->
                  </div>
                  <div class="avatar-wrapper" @click="goToElderly('/dict')">
                    <el-avatar style="background-color: #eceda2">
                      <el-icon color="#d3fcfc" size="40px "><MessageBox/></el-icon></el-avatar>
                    <div class="avatar-text">字典管理</div> <!-- 文字 -->
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div id="five" style="width: 100%; height: 300px;"></div>
            </el-col>
            <el-col :span="8">
              <div id="six" style="width: 100%; height: 300px;"></div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 50px">
            <el-col :span="24">
              <div id="seven" style="width: 100%; height: 300px;"></div>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>


<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts'; // 引入 ECharts 库
import { useRouter } from 'vue-router';  // 引入 useRouter
import { inject } from 'vue';
import qs from "qs";
import axios from '@/util/request';
import {ElMessage} from "element-plus";

const menuRef = inject('menuRef'); // 获取 menuRef
const router = useRouter();
const goToElderly = (path) => {
  openMenuForPath(path);  // 跳转到 /elderly 页面并展开对应菜单
};

const openMenuForPath = async (path) => {
  await router.push(path);  // 跳转到目标路径

  if (menuRef.value) {
    const menuIndexMap = {
      '/index': 1,
      '/elderly': 2,
      '/healthe': 3,
      '/bed': 4,
      '/employee': 5,
      '/goods': 6,
      '/order': 7,
      '/balance':7,
      '/dict': 8,
    };

    const menuIndex = menuIndexMap[path];
    if (menuIndex !== undefined) {
      menuRef.value.open(menuIndex);  // 展开对应的子菜单
    }
  }
};

//定义对象用来保存商品的查询条件 获取商品来渲染饼图
// const searchGoodsForm = ref({name:'',code:'',status:'',updateTime:''});
// const goodsArr = ref([]);

// 第二行第一个图
//获取在URL查询字符串的参数值,如上方URL中的字典id 104
const dictId = new URLSearchParams(window.location.search).get('id');
const searchForm = ref({label:'',dictId:101});
//定义数组对象用来保存字典项表格数据
const dictOptionArr = ref([]);
//定义加载字典项的方法
const selectDictOption = ()=>{
  let data = qs.stringify(searchForm.value);
  axios.get('/v1/dictoption/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      dictOptionArr.value = response.data.data;
      five(dictOptionArr.value);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

const user = ref(getUser());
onMounted(() => {
 selectDictOption();
  // 确保 DOM 挂载完成后再初始化 ECharts
  // 第 一 行第一个图
  one();
  // 第 一 行第二个图
  two();
  // 第 一 行第三个图
  three();
  // 第 一 行第四个图
  four();
  // 第二行第一个图
  five();
  // 第二行第二个
  six();
  // 第三行图
  seven();
});
const one = () => {
  const chartDom = document.getElementById('one');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: '新增用户数量',
      },
      tooltip: {
        trigger: 'axis', // 仅在鼠标悬停时显示提示
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: false, // 示例 X 轴数据
        axisLabel: {
          show: false, // 隐藏 X 轴上的数字
        },
        axisLine: {
          show: false, // 隐藏 X 轴的横线
        },
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },
        axisTick: {
          show: false, // 隐藏 X 轴刻度
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: false, // 隐藏 Y 轴上的数字
        },
        splitLine: {
          show: false, // 隐藏 Y 轴的网格线
        },
        axisLine: {
          show: false, // 隐藏 Y 轴的纵向线
        },
        axisTick: {
          show: false, // 隐藏 Y 轴刻度
        },
      },
      series: [
        {
          data: [0,10,30,15,10,25],
          type: 'line',
          areaStyle: {},
          symbol: 'none', // 去除线图中的数据点
          label: {
            show: false, // 彻底隐藏数据点的数字
          },
        },
      ],
    };
    myChart.setOption(option);
  } else {
    console.error('无法找到 DOM 元素 #main');
  }
};

const two = () => {
  const chartDom = document.getElementById('two');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: '新增员工数量',
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 示例 X 轴数据
        axisLabel: {
          show: false, // 隐藏 X 轴上的数字
        },
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },
        axisTick: {
          show: false, // 隐藏 X 轴刻度
        },
        axisLine: {
          show: false, // 隐藏 X 轴的横线
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: false, // 隐藏 X 轴上的数字
        },
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },
      },
      series: [
        {
          data: [12, 20, 15, 8, 7, 11, 13], // 示例数据
          type: 'bar', // 柱状图类型
        },
      ],
    };
    myChart.setOption(option); // 确保调用 setOption 渲染图表
  } else {
    console.error('无法找到 DOM 元素 #two');
  }
};

const three=()=>{
  const chartDom = document.getElementById('three');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: '新增购药订单数量',
      },
      tooltip: {
        trigger: 'axis', // 仅在鼠标悬停时显示提示
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: false, // 示例 X 轴数据
        axisLabel: {
          show: false, // 隐藏 X 轴上的数字
        },
        axisLine: {
          show: false, // 隐藏 X 轴的横线
        },
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },
        axisTick: {
          show: false, // 隐藏 X 轴刻度
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: false, // 隐藏 X 轴上的数字
        },
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },

      },
      series: [
        {
          data: [82, 93, 90, 93, 12],
          type: 'line',
          symbol: 'none', // 去除线图中的数据点
          areaStyle: {},
          label: {
            show: false, // 彻底隐藏数据点的数字
          },
        },
      ],
    };
    myChart.setOption(option);
  } else {
    console.error('无法找到 DOM 元素 #main');
  }
}

const four=()=>{
  const chartDom = document.getElementById('four');

  if (chartDom) {
    const myChart = echarts.init(chartDom);

    const option = {
      title: {
        text: '新增药品数量',
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 示例 X 轴数据
        axisLabel: {
          show: false, // 隐藏 X 轴上的数字
        },
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },
        axisLine: {
          show: false, // 隐藏 X 轴的横线
        },
        axisTick: {
          show: false, // 隐藏 X 轴刻度
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: false, // 隐藏 X 轴上的数字
        },
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },
      },
      series: [
        {
          data: [10, 20, 10,10, 13], // 示例数据
          type: 'bar', // 柱状图类型
        },
      ],
    };
    myChart.setOption(option); // 确保调用 setOption 渲染图表
  } else {
    console.error('无法找到 DOM 元素 #two');
  }
}

const five = (dictOptionArrData) => {
  const chartDom = document.getElementById('five');
  console.log(dictOptionArrData);  // 打印传入的 dictOptionArrData 数据

  // 检查 dictOptionArrData 是否为有效数组
  if (Array.isArray(dictOptionArrData) && dictOptionArrData.length > 0) {
    if (chartDom) {
      const myChart = echarts.init(chartDom); // 初始化图表

      // 使用 map() 转换 dictOptionArrData 数组为饼图数据格式
      const pieData = dictOptionArrData.map(item => ({
        value: item.label,  // 商品名称作为 name
      }));
      const Data = dictOptionArrData.map(item => ({
        value: item.value,  // 商品名称作为 name
      }));

      const option = {
        title: {
          text: '用户标签分布占比',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: false, // 隐藏 X 轴上的数字
          },
          splitLine: {
            show: false, // 隐藏 X 轴的网格线
          },
        },
        yAxis: {
          type: 'category',
          data: pieData,
          axisLabel: {
            show: false, // 隐藏 Y 轴上的标签
          },
          splitLine: {
            show: false, // 隐藏 Y 轴的网格线
          },
        },
        series: [
          {
            type: 'bar',
            data: Data,  // 数据应根据你的需求动态更新
          },
        ],
      };

      myChart.setOption(option); // 设置图表的配置项
    } else {
      console.error('无法找到 DOM 元素 #five');
    }
  } else {
    console.error('传入的 dictOptionArrData 不是有效的数组:', dictOptionArrData);
  }
};

const six = (goodsData) => {
  const chartDom = document.getElementById('six');
  console.log(goodsData);  // 打印传入的 goodsData 数据

  // 检查 goodsData 是否为数组
  if (Array.isArray(goodsData) && goodsData.length > 0) {
    if (chartDom) {
      const myChart = echarts.init(chartDom); // 初始化 ECharts

      // 使用 map() 转换 goodsData 数组为饼图数据格式
      const pieData = goodsData.map(item => ({
        value: item.sales,  // 销量作为 value
        name: `${item.name} 类订单`  // 商品名称作为 name
      }));

      const option = {
        title: {
          text: '商品订单分类占比',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data: pieData,  // 使用动态生成的 data 数组
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      myChart.setOption(option); // 渲染图表
    } else {
      console.error('无法找到 DOM 元素 #six');
    }
  } else {
    console.error('传入的 goodsData 不是有效的数组:', goodsData);
  }
};

const seven = () => {
  const chartDom = document.getElementById('seven');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: '用户趋势统计',
      },
      tooltip: {
        trigger: 'axis', // 仅在鼠标悬停时显示提示
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['时间1', '时间2', '时间3', '时间4', '时间5', '时间6', '时间7'], // 示例 X 轴数据
        splitLine: {
          show: false, // 隐藏 X 轴的网格线
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false, // 隐藏 Y 轴的网格线
        },
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320], // 示例数据
          type: 'line',
          smooth: true, // 使用曲线
          areaStyle: {}, // 显示区域阴影
          label: {
            show: false, // 彻底隐藏数据点的数字
          },
        },
      ],
    };
    myChart.setOption(option);
  } else {
    console.error('无法找到 DOM 元素 #seven');
  }
};

</script>

<style scoped>
/* 固定 Header 的高度 */
.header {
  height: 300px; /* 根据需要设置 Header 的固定高度 */
}

/* Main 自动占据剩余空间 */
.main {
  flex: 1;
  padding: 20px;
}

/* Footer 高度固定 */
.footer {
  height: 100px; /* 示例高度 */
}

/* 调整列间距 */
.el-col {
  text-align: center;
  padding: 10px;
}
.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
/* 设置父容器 flex 布局 */
.demo-type-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让内容均匀分布 */
  height: 100%;
}

.demo-type {
  display: flex;
  justify-content: space-around; /* 水平方向均匀分布 */
  align-items: center; /* 垂直方向居中 */
  flex: 1; /* 每个 demo-type 在父容器内平分高度 */
}

.avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 子组件充满父容器高度 */
  flex: 1; /* 子组件按比例缩放 */
  flex-direction: column; /* 使头像和文字垂直排列 */
}

.avatar-text {
  margin-top: 8px; /* 设置头像和文字之间的间距 */
  font-size: 14px; /* 调整字体大小 */
  color: #333; /* 设置文字颜色 */
  text-align: center; /* 确保文字居中 */
}

.avatar-wrapper .el-avatar{
  width: 4em; /* 使用比例单位自动适应父容器 */
  height: 4em;
}

</style>